<!-- 公众号-提示 -->
<template>
    <div class="official-account-tip">
        <div class="title-box">
            <div class="title">展示内容：小程序绑定关注的公众号信息</div>
            <el-popover
                placement="bottom"
                title="公众号关注教程"
                :width="300"
                trigger="click"
                popper-class="official-account-tip-popover"
            >
                <template #reference>
                    <div class="help-btn">显示教程</div>
                </template>
                <div class="content-container">
                    <div class="content-item">
                        <p class="content-item-title font-bold">一. 小程序关联公众号操作流程</p>
                        <p class="font-indent-12 font-bold">1.如何设置公众号关联小程序:</p>
                        <p class="font-indent-24">登录—微信公众平台—公众号平台—小程序—小程序管理—添加关联小程序。</p>
                        <p class="font-indent-12 font-bold">2.如何查看小程序已经关联的公众号:</p>
                        <p class="font-indent-24">登录—微信公众平台—小程序账号平台—设置—关联设置。</p>
                    </div>

                    <div class="content-item">
                        <p class="content-item-title font-bold">二. 微信公众号操作流程</p>
                        <p class="font-indent-12">1.进入—微信公众平台—小程序账号后台—设置—关注公众号—公众号关注组件—开启功能。</p>
                        <p class="font-indent-12">2.只能选一个已经与小程序关联的公众号，绑定为引导关注的对象。(注：设置的公众号与小程序主体须一致)</p>
                        <p class="font-indent-12">3.绑定完成，展示已设置公众号名称。</p>
                    </div>
                </div>
            </el-popover>
        </div>
        <div class="title-box">注：一个页面只能有一个该组件。组件只有用户扫码进入小程序时才会出现。</div>
        <div class="tip-txt">注：仅支持微信小程序</div>
    </div>
</template>

<script>
import { defineComponent, toRefs } from 'vue'
export default defineComponent({
    name: 'OfficialAccountTip',
    props: {
        widget: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { widget } = toRefs(props)

        return {
            widget
        }
    }
})
</script>

<style lang="less" scoped>
.official-account-tip {
    .title-box {
        font-size: 12px;
        margin-bottom: 15px;
        &:last-child {
            margin-bottom: 0;
        }
        .help-btn {
            display: inline-block;
            color: var(--edit-color-primary);
            cursor: pointer;
        }
    }
    .tip-txt {
        font-size: 12px;
        margin-top: 10px;
        color: var(--edit-text-color-placeholder);
    }
}

.official-account-tip-popover {
    .content-container {
        font-size: 13px;
        .content-item {
            margin-bottom: 10px;
            &:last-child {
                margin-bottom: 0;
            }
            .content-item-title {
                font-size: 14px;
            }
            p {
                line-height: 25px;
            }
        }
        .font-bold {
            font-weight: bold;
        }
        .font-indent-12 {
            text-indent: 12px;
        }
        .font-indent-24 {
            text-indent: 24px;
        }
    }
}
</style>